<template>
    <div>
        <div class="jx-content">
            <div class=" add-padding content-box">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="案例标题 : " prop="name" style="width:30%" >
                        <el-input v-model="ruleForm.name" maxlength="50" @input="dataTitle"></el-input>
                        <p style="position:absolute;  right: -38px; top: 15px;font-size:12px;color:#bbbbbb"> {{ruleForm.titnum}}/50</p>
                    </el-form-item>
                    <el-form-item label="案例简介 : " prop="desc" >
                        <el-input type="textarea" v-model="ruleForm.desc" style="height:150px; width:90%"  maxlength="150" @input="dataInput"></el-input>
                        <p style=" position:absolute;  right: 37px; bottom: 3px;font-size:12px;color:#bbbbbb">{{ruleForm.desnum}}/150</p>
                    </el-form-item>
                        <el-form-item label="案例说明 : " prop="introction" >
                        <vue-wangeditor id="desc-editor" :editorMenus="editorMenus" :content="ruleForm.content" style="width:90%" height='300' ></vue-wangeditor>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center">
                    <button @click="submitFn('ruleForm')" class="button-style question-submit">保存</button>
                    <button @click="Show" class="button-style  show">预览</button>
                </div>
            </div>
            <el-dialog :close-on-click-modal="false" title="预览" :visible.sync="dialoge" width="800px">
                <div  class="business-description-editor-content w-e-text content-container" :content="ruleForm.content" style="height: 500px; border:none;"></div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import vueWangeditor from '@/components/vueWangeditor.vue'
    export default {
        components: {
            vueWangeditor
        },
        data() {
            return {
                //弹窗
                dialoge:false,
                strpic:'',
                picurl:'',
                fileimg:'',
                casename:'',
                title:'',
                id:'',
                Ids:'',
                picone:'',
                num:'',
                editorMenus: [    // 菜单配置
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'image',  // 插入图片
                    'table',  // 表格
                    'code',  // 插入代码
                ],
                 ruleForm: {
                    name:'',
                    desc:'',
                    introction:'',
                    content:'',
                    titnum:0,
                    desnum:0,
                },
                rules: {
                    name: [
                        { required: true, message: '请输入案例标题', trigger: 'blur' },
                    ],
                    desc: [
                        { required: true, message: '请输入案例简介', trigger: 'blur' }
                    ],
                },

            }
        },
        mounted () {
            this.id = this.$route.query.Id  //添加的id
            this.Ids=this.$route.query.Ids  //编辑的id
            this.num=this.$route.query.num
           // console.log(this.id) //9
             if( this.id){
                // console.log(111) //添加
             }else if(this.Ids){
                 //console.log(999999) //编辑
                  this.edit()

             }
         },
        methods:{
             //编辑内容反显示
             edit(){
                 let self = this
                   self.$http.get('/tes/business/case?caseId='+self.Ids).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                         self.fileimg = res.data.path
                         self.ruleForm.titnum = 50-(res.data.caseTitle.length)
                         self.ruleForm.desnum = 150-(res.data.caseIntro.length)
                         self.ruleForm.name = res.data.caseTitle,
                         self.ruleForm.desc = res.data.caseIntro,
                         self.ruleForm.content = res.data.caseContent
                    }else{
                        self.$message.error(res.message)
                    }
                })
             },
             //查看预览内容
             Show(){
               this.dialoge=true
               let EditorText = document.getElementById('desc-editor-text').value
               this.$nextTick(() => {
                   $('.business-description-editor-content').html(EditorText)
                })
             },
             //信息字数
            dataInput(){
                var txtVal = this.ruleForm.desc.length;
                this.ruleForm.desnum = 150 - txtVal
            },
            dataTitle(){
                var txtVal = this.ruleForm.name.length;
                this.ruleForm.titnum = 50 - txtVal
            },
            //点击保存
            submitFn(ruleForm){
               let self = this;
              //保存前判断是否有ids
              if(this.Ids){  //编辑保存
                if(self.ruleForm.name=='' || self.ruleForm.desc==''){
                    return
                }
                 let EditorText = document.getElementById('desc-editor-text').value
                 var reg=/img(.*?)/g

                if(reg.test(EditorText)){   //编辑保存有图片
                    let self = this;
                    var repx= /data:[\'\"]?([^\'\"]*)[\']?/ig
                    var base=EditorText.match(repx)
                    if(base!=null){
                    //console.log(10000000)
                        self.$http.post('/tes/business/case/changePic',base).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            var arr=[]
                            arr= res.data
                            for(var i=0; i<arr.length; i++){
                                //self.picone=arr[0].fileName
                                self.picone=arr[0].fileName
                                self.picurl=arr[i].mappingUrl
                                self.strpic=EditorText.replace(/data:[\'\"]?([^\'\"]*)[\']?/ig, self.picurl)
                            }

                        //console.log( arr[0].mappingUrl)
                        const loading = this.$loading({
                                lock: true,
                                text: '数据加载中',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            })
                             //此方法是获取http路径图片，返给后台
                                var arrList = []
                                self.strpic.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
                                    arrList.push(capture)
                                });
                                arrList.push(self.picurl)
                                let files=''
                                for(var i=0; i<arrList.length;i++){
                                    if(arrList[i].indexOf(self.fileimg) > -1){  //则包含该元素
                                        var Img= arrList[i].split(self.fileimg)
                                        files=Img[1]
                                        break
                                    }
                                }

                            self.$refs[ruleForm].validate((valid) => {
                                if (valid) {
                                self.$http.post('/tes/business/case/saveCase',{
                                    caseTitle: self.ruleForm.name,
                                    caseId:self.Ids,
                                    caseIntro: self.ruleForm.desc,
                                    caseContent:self.strpic,
                                    file:files

                                }).then((response) => {
                                    let res = response.data
                                    if(res.code == '200') {
                                        this.$message({
                                            message: '保存成功',
                                            type: 'success'
                                        })

                                        loading.close()
                                        self.$router.push({
                                            path: '/Admin/Production/IndustryCaseDetail',
                                            query: {id:self.num}
                                        })
                                    }else{
                                        loading.close()
                                        this.$message.error(res.message)
                                    }
                                })
                                }
                            })

                        }else{
                            this.$message.error(res.message)
                            loading.close()
                        }
                    })

                    }else if(base==null){
                      // console.log(50000000)
                        let EditorText = document.getElementById('desc-editor-text').value
                        //此方法获取src内容 传第一张
                        var arr = []
                        let files=''
                        EditorText.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
                            arr.push(capture)
                        });

                        for(var i=0; i<arr.length;i++){
                          if(arr[i].indexOf(self.fileimg) > -1){  //则包含该元素
                             var t= arr[i].split(self.fileimg)
                              files=t[1]
                              break
                          }
                        }
                         self.$refs[ruleForm].validate((valid) => {
                            if (valid) {
                                self.$http.post('/tes/business/case/saveCase ',{
                                caseTitle: self.ruleForm.name,
                                caseIntro: self.ruleForm.desc,
                                caseContent:EditorText,
                                caseId:self.Ids,
                                file:files
                            }).then((response) => {
                                let res = response.data
                                if(res.code == '200') {
                                    this.$message({
                                        message: '保存成功',
                                        type: 'success'
                                    })

                                    self.$router.push({
                                        path: '/Admin/Production/IndustryCaseDetail',
                                        query: {id:self.num}
                                    })
                                }else{
                                    this.$message.error(res.message)

                                }
                            })
                         }
                     })

                    }

                 }else{  //编辑保存没图片
                   let self = this;
                   let Text = document.getElementById('desc-editor-text').value
                    const loading = this.$loading({
                        lock: true,
                        text: '数据加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    })
                    self.$refs[ruleForm].validate((valid) => {
                        if (valid) {
                            self.$http.post('/tes/business/case/saveCase ',{
                            caseTitle: self.ruleForm.name,
                            caseIntro: self.ruleForm.desc,
                            caseContent:Text,
                            caseId:self.Ids,
                            file:null
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                loading.close()
                                self.$router.push({
                                    path: '/Admin/Production/IndustryCaseDetail',
                                    query: {id:self.num}
                                    })
                            }else{
                                loading.close()
                                this.$message.error(res.message)
                            }
                        })
                        }
                    })

                }

              }else if(this.id){ //添加保存
                  let EditorText = document.getElementById('desc-editor-text').value
                  var reg=/img(.*?)/g
                  if(reg.test(EditorText)){   //保存的有图片
                    let repx= /data:[\'\"]?([^\'\"]*)[\']?/ig
                    let base=EditorText.match(repx)
                    if(base!=null){
                    // console.log(10000000)
                          self.$http.post('/tes/business/case/changePic',base).then((response) => {
                                    let res = response.data
                                    if(res.code == '200') {
                                        var arr=[],
                                        arr= res.data
                                    for(var i=0; i<arr.length; i++){
                                        self.picone=arr[0].fileName
                                        var picurl=arr[i].mappingUrl
                                        self.strpic=EditorText.replace(/data:[\'\"]?([^\'\"]*)[\']?/ig, picurl)
                                    }
                                    //console.log(self.strpic)
                                        const loading = this.$loading({
                                            lock: true,
                                            text: '数据加载中',
                                            spinner: 'el-icon-loading',
                                            background: 'rgba(0, 0, 0, 0.7)'
                                        })
                                        self.$refs[ruleForm].validate((valid) => {
                                            if (valid) {
                                            self.$http.post('/tes/business/case/makeCase ',{
                                                caseTitle: self.ruleForm.name,
                                                businessCaseId:self.id,
                                                caseIntro: self.ruleForm.desc,
                                                caseContent:self.strpic,
                                                file: self.picone
                                            }).then((response) => {
                                                let res = response.data
                                                if(res.code == '200') {
                                                    this.$message({
                                                        message: '保存成功',
                                                        type: 'success'
                                                    })
                                                    loading.close()
                                                    self.$router.push({
                                                        path: '/Admin/Production/IndustryCaseDetail',
                                                        query: {id:self.id}
                                                    })
                                                }else{
                                                    loading.close()
                                                    this.$message.error(res.message)

                                                }
                                            })
                                            }
                                        })
                                    }else{
                                        this.$message.error(res.message)
                                    }
                                })
                    }else if(base==null){
                        //console.log(50000000)

                           self.$refs[ruleForm].validate((valid) => {
                            if (valid) {
                                const loading = this.$loading({
                                    lock: true,
                                    text: '文件保存中...',
                                    spinner: 'el-icon-loading',
                                    background: 'rgba(0, 0, 0, 0.7)'
                                })
                                self.$http.post('/tes/business/case/makeCase ',{
                                caseTitle: self.ruleForm.name,
                                caseIntro: self.ruleForm.desc,
                                caseContent:EditorText,
                                businessCaseId:self.id,
                                file:null,
                            }).then((response) => {
                                let res = response.data
                                if(res.code == '200') {
                                    this.$message({
                                        message: '保存成功',
                                        type: 'success'
                                    })
                                    self.$router.push({
                                        path: '/Admin/Production/IndustryCaseDetail',
                                        query: {id:self.id}
                                    })
                                    loading.close() 
                                }else{
                                    this.$message.error(res.message)
                                    loading.close() 

                                }
                            })
                         }
                    })

                }

                }else{  //保存的没有图片
                     self.$refs[ruleForm].validate((valid) => {
                        if (valid) {
                            const loading = this.$loading({
                                lock: true,
                                text: '文件保存中...',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            })
                            self.$http.post('/tes/business/case/makeCase ',{
                            caseTitle: self.ruleForm.name,
                            caseIntro: self.ruleForm.desc,
                            caseContent:EditorText,
                            businessCaseId:self.id,
                            file:null,
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })

                                self.$router.push({
                                    path: '/Admin/Production/IndustryCaseDetail',
                                    query: {id:self.id}
                                })
                                    loading.close() 
                            }else{
                                this.$message.error(res.message)
                                    loading.close() 

                            }
                        })
                        }
                    })

                }

              }

             }
        }
    }
</script>

<style scoped>
.el-form>>>.el-form-item__content{
    height: auto;
    z-index: 8;
}
.el-form >>>.el-input__inner{
     width: 220px;
}
#desc-editor>>>.w-e-toolbar {
    border: solid 1px #bfbfbf;
    background: #f9f9f9;
}
#desc-editor>>>.w-e-text {
    border: solid 1px #bfbfbf;
    border-top: none;
    padding: 10px;
    overflow-y: scroll;
}
#desc-editor>>>::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

#desc-editor>>>::-webkit-scrollbar-thumb {
    background: #c0c0c0
}
.show{
    margin-left: 15px;
}

.el-textarea>>>textarea{
    resize: none
}
</style>
<style scoped lang="scss">
    .content-container {
        overflow-y: scroll;
        &::-webkit-scrollbar {
            width: 5px;
        }

        &::-webkit-scrollbar-thumb {
            background: #c0c0c0
        }
    }
</style>


